<template>
  <div>
    <m-card :icon="icon" :title="title">
      <div class="nav pb-1">
        <div class="nav-item" :class="{active: active === i }"
         v-for="(category,i) in categories" :key="i"
         @click = "$refs.list.swiper.slideTo(i)"
         >
          <div class="nav-link">{{category.name}}</div>
        </div>
      </div>
      <!-- 主体内容 -->
      <div class="card-body">
        <swiper :options="{autoHeight:true}" ref='list' @slide-change="() => active = $refs.list.swiper.realIndex">
          <swiper-slide v-for="(category,i) in categories" :key="i">
            <slot name='items' :category="category"></slot>
          </swiper-slide>
        </swiper>
      </div>
    </m-card>
  </div>
</template>

<script>
export default {
  props: {
    title: { type: String, required: true },
    icon: { type: String, required: true },
    categories: { type: Array, required: true }
  },
  data() {
    return {
        active: 0
    };
  }
};
</script>

<style lang="scss" scoped>
</style>